<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>连锁干洗中心业务管理系统</title>
    <%- include('css') %>
</head>

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <%- include('header') %>
        <%- include('menu') %>


        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>角色管理</legend>
                </fieldset>

                <form name="form1" class="layui-form" action="">

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">角色名</label>
                            <div class="layui-input-inline">
                                <input type="text" placeholder="请输入角色名" name="search" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>

                    <table class="layui-hide" id="tablediv" lay-filter="tablediv"></table>
                </form>
                <script type="text/html" id="toolbar">
                    <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="search">查询数据</button>
                    <button type="button" class="layui-btn layui-btn-sm" lay-event="tonew">新建数据</button>

                  </div>
                </script>

                <script type="text/html" id="opdiv">
                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </script>


            </div>
        </div>


        <%- include('footer') %>
    </div>
    <%- include('script') %>

    <script>
        var table;
        var vm = new Vue({
            el: '#app',
            mounted: function () {
                layui.use(['element', "table", 'form', 'laytpl'], function () {

                    var laydate = layui.laydate,
                        form = layui.form,
                        laytpl = layui.laytpl,
                        element = layui.element;
                    table = layui.table

                    table.render({
                        elem: "#tablediv",
                        url: "/admin/role",
                        toolbar: '#toolbar',
                        cols: [
                            [
                                {
                                    field: "name",
                                    title: "角色名",
                                    minWidth: 80,
                                },
                                {
                                    field: "code",
                                    title: "编号",
                                    minWidth: 150,
                                    sort: true
                                },
                                {
                                    field: "created_at",
                                    minWidth: 150,
                                    title: "创建时间",
                                    sort: true
                                },
                                {
                                    field: "updated_at",
                                    minWidth: 150,
                                    title: "更新时间",
                                    sort: true
                                },
                                {
                                    fixed: 'right',
                                    title: '操作',
                                    toolbar: '#opdiv',
                                    width: 150
                                }
                            ]
                        ],
                        page: true,
                    });

                    table.on('toolbar(tablediv)', function (obj) {
                            if (obj.event === 'tonew') {
                                layer.open({
                                    type: 2,
                                    title: false,
                                    area: ['1000px', '500px'],
                                    anim: 2,
                                    content: ['/admin/role/tonew'], //iframe的url，no代表不显示滚动条
                                    end: function () { //
                                    }
                                });
                            }
                        })

                    table.on('tool(tablediv)', function (obj) {

                        var data = obj.data;

                        if (obj.event === 'del') {
                            layer.confirm('确定删除？？', function (index) {
                                $.ajax({
                                    url:'/admin/role/'+data.id,
                                    type:'Delete',
                                    success:(res)=> {
                                        if (res.code === 200) {
                                            layer.close(index);
                                            layer.msg('删除成功!',{icon:1})
                                            table.reload('tablediv', {
                                                where: { //设定异步数据接口的额外参数，任意设
                                                }
                                            });
                                        }else{
                                            layer.msg('删除失败：'+res.error+' -- '+res.code,{icon:2})
                                        }
                                    }
                                })

                            });
                        } else if (obj.event === 'edit') {
                            layer.open({
                                type: 2,
                                title: false,
                                area: ['1000px', '500px'],
                                anim: 2,
                                content: ['/admin/role/toedit?id=' + data.id], //iframe的url，no代表不显示滚动条
                                end: function () { //此处用于演示
                                }
                            });
                        }
                    });

                    //查询按钮
                    form.on('submit(search)', function (data) {
                        table.reload('tablediv', {
                            where: { //设定异步数据接口的额外参数，任意设
                                search: data.field.search
                                //…
                            },
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                        return false;
                    });
                })
            },
            methods: {
                iframeclose: function () {
                },
                iframesave: function () {
                    table.reload('tablediv', {
                        where: { //设定异步数据接口的额外参数，任意设
                        },
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                },
                iframeupdate: function () {
                    table.reload('tablediv', {
                    });
                }
            }
        })
    </script>
</body>

</html>
